/**
 * Created with JetBrains PhpStorm.
 * User: ishowshao
 * Date: 12-7-13
 * Time: 下午3:28
 */

/**
 * @class FlyFight.view.Grid
 * @extends Zen.View
 */
FlyFight.view.Grid = Zen.extend(Zen.View, {
    initView: function (config) {
        this.x = config['x'];
        this.y = config['y'];
        this.cell = config['cell'];
        this.matrix = new FlyFight.model.Matrix();
        this.matrix.init(this.x, this.y);

        this.cellWidth = this.cell;
        this.cellHeight = this.cell;
        this.width = this.x * (this.cellWidth + 1);
        this.height = this.y * (this.cellHeight + 1);
    },
    draw: function () {
        var gridHtml = [];
        var rowHtml = [];
        gridHtml.push('<div class="ff-grid" style="width: ' + this.width + 'px; height: ' + this.height + 'px;">');
        for (var i = 0; i < this.y; i += 1) {
            rowHtml = [];
            rowHtml.push('<div class="ff-grid-row">');
            for (var j = 0; j < this.x; j += 1) {
                rowHtml.push('<span class="ff-grid-cell" data-x="' + j + '" data-y="' + i + '" style="width:' + this.cellWidth + 'px; height:' + this.cellHeight + 'px;"></span>');
            }
            rowHtml.push('</div>');
            gridHtml.push(rowHtml.join(''));
        }
        gridHtml.push('</div>');
        return gridHtml.join('');
    },
    render: function (renderTo) {
        this.el = jQuery(this.draw());
        jQuery(renderTo).append(this.el);
    },
    getOffset: function () {
        return this.el.offset();
    }
});

